<template>
  <div class="goods">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" title="综合" />
      <van-dropdown-item v-model="value2" :options="option2" title="价格" @change="desc" />
      <van-dropdown-item v-model="value3" :options="$store.state.filterCategory" title="全部" />
    </van-dropdown-menu>
    <Product v-if="$store.state.popGoodList.length > 0" :goodsList="$store.state.popGoodList"></Product>
    <div class="nothing" v-else>
      <van-icon name="comment-o" />
      <p>您搜索的商品未上架</p>
    </div>
  </div>
</template>

<script>
import Product from "@/components/Home/Product";
export default {
  components: {
    Product
  },
  props: ["filterCategory",'value'],
  data() {
    return {
      value1: "",
      value2: "",
      value3: 0,
      option1: [],
      option2: [
        { text: "价格由低到高", value: 'asc' },
        { text: "价格由高到低", value: 'desc' }
      ],
      option3: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 }
      ]
    };
  },
  methods: {
    desc(e) {
      this.$store.dispatch('AsyncChangePopGoodList',{keyword:this.value,order:e,sort:'price'})
    }
  }
};
</script>

<style lang="less" scoped>
.nothing {
  text-align: center;
  color: #666;
  margin-top: 30vh;
  .van-icon {
    font-size: 30px;
  }
}
</style>